<template>
	<!-- 子组件展示详细内容 -->

	<el-dialog :title="name" :visible.sync="dialogVisible" width="30%" :before-close='childclick'>
		<img :src='picture' class="imgshow" />
		<br />
		<span>这是一段信息{{ id }} {{ description }}</span>
		<span slot="footer" class="dialog-footer">
			<el-button type="primary" @click="childclick">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
	export default {
		name: 'show',
		// 父组件传过来的数据
		props: {
			dialogVisible: {
				type: Boolean,
				default: false
			},
			description: {
				type: String,
				default: '描述'
			},
			name: {
				type: String,
				default: 'Workspace Design Trends and Ideas.'
			},
			id: {
				type: Number,
				default: 0
			},
			picture: {
				type: String,
				default: ''
			}

		},
		data() {
			return {
				// 传给父组件，关闭窗口
				flags: false
			}
		},
		methods: {
			childclick() {
				// childByValue是在父组件on监听的方法
				// 第二个参数this.flags是需要传的值
				this.$emit('childByValue', this.flags)
			}
		}

	};
</script>

<style>
	.imgshow {
		width: 40%;
		height: 40%;
	}
</style>
